<!DOCTYPE html>
<html>

	<head>
		<title>个人页面</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css"/>
		<link rel="stylesheet" href="/css/userProfiles.css"/>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>
		<script>
            $(function () {
                // 用工具类获取url上参数id的值
                var params=getParams();
                if(params.id){
                    //id表示的是当前用户的id,查询该用户游记相关的信息
                    $.get("/users/"+params.id,function (data) {
                        $(".userView").renderValues(data);
                    });
                }
                //翻页相关
                //默认当前页为1
                var tcurrentPage=1;
                //总页数
                var tpages;
                //存储游记数据的数组
                var travelData=[];
                //发送ajax请求
                function queryForTravels() {
                    $.get("/users/"+params.id+"/travels",{currentPage:tcurrentPage},function (data) {
                        //为了每次滑动查询的数据往上叠加(将两个数组合并到第一个数组上)
                        $.merge(travelData,data.list);
                        //把累加的数组转换成json格式
                        var json={
                            list:travelData
                        }
                        $("#travels").renderValues(json,{
                            getHref:function (item,value) {
                                //item就是要渲染数据的标签,那个贴了很多属性的a标签
                                $(item).attr("href",$(item).data("href")+value);//动态地呈现编辑的信息,拼接上每个文章的id
                            }
                        });
                        //给总数量赋值
						$("#travels-tab span").html=data.total;
                        //data是返回的pageInfo里的内容
                        tpages=data.pages;//给总页数赋值
                    });
                    //当前页加一
                    tcurrentPage++;
				}
                //默认查询第一页
                queryForTravels();
                queryForComments();

              /*//查询某id的用户的所有评论
				$.get("/users/"+params.id+"/comments",function (data) {
                    $("#comments").renderValues(data,{
                        getStar:function (item,value) {    //星星数显示的方法,遍历拼接有几个实心星星,几个空心星星
                            var temp="";
                            for(var i=0;i<value;i++){
                                temp+='<i class="fa fa-star">';
                            }
                            for(var i=0;i<5-value;i++){
                                temp+='<i class="fa fa-star-o">';
                            }
                            $(item).html(temp);
                        },
                        getHref:function (item,value) {
                            //item就是要渲染数据的标签,那个贴了很多属性的a标签
                            $(item).attr("href",$(item).data("href")+value);//动态地呈现编辑的信息,拼接上每个文章的id
                        }
					});
                });*/
                //翻页相关
                //默认当前页为1
                var ccurrentPage=1;
                //总页数
                var cpages;
                //存储游记数据的数组
                var commentData=[];
				function queryForComments() {
                	 $.get("/users/"+params.id+"/comments",{currentPage:ccurrentPage},function (data) {
                       //为了每次滑动查询的数据往上叠加(将两个数组合并到第一个数组上)
                       $.merge(commentData,data.list);
                       //把累加的数组转换成json格式
                       var json={
                           list:commentData
                       }
                         console.log(json);
                         $("#comments").renderValues(data,{
                           getStar:function (item,value) {    //星星数显示的方法,遍历拼接有几个实心星星,几个空心星星
                               var temp="";
                               for(var i=0;i<value;i++){
                                   temp+='<i class="fa fa-star">';
                               }
                               for(var i=0;i<5-value;i++){
                                   temp+='<i class="fa fa-star-o">';
                               }
                               $(item).html(temp);
                           },
                           getHref:function (item,value) {
                               //item就是要渲染数据的标签,那个贴了很多属性的a标签
                               $(item).attr("href",$(item).data("href")+value);//动态地呈现编辑的信息,拼接上每个文章的id
                           }
                       });
                       //data是返回的pageInfo里的内容
                       cpages=data.pages;//给总页数赋值
                   });
                    //当前页加一
                    //ccurrentPage++;
                    console.log(ccurrentPage);
                }
                //监听鼠标滚动事件
                $(window).scroll(function () {
                    //当文档滚上去的高度+窗口的高度>=html整个文档的高度,
                    if ($(document).scrollTop() + $(window).height() >= $(document).height() - 1) {
                        var name = $("#tabs .active").attr("id");//获取此时选中的是哪个标签
                        if (name == "travels-tab") {
                            //并且当前页小于等于总页数时,执行分页查询
                            if (tcurrentPage <= tpages) {
                                queryForTravels();
                            } else {
                                $(document).dialog({
                                    type: 'notice',
                                    content: '<span class="info-text">已经到底了!</span>',
                                    autoClose: 1500
                                });
                            }
                        } else if (name == "comments-tab") {
                            //并且当前页小于等于总页数时,执行分页查询
                            if (ccurrentPage <= cpages) {
                                ccurrentPage++;
                                queryForComments();
                            } else {
                                $(document).dialog({
                                    type: 'notice',
                                    content: '<span class="info-text">已经到底了!</span>',
                                    autoClose: 1500
                                });
                            }
                        }
                    }
                });
            });
		</script>
	</head>
	<body>

		<div class="container bg userView" style="background-image: url(&quot;/img/user/bg.jpeg&quot;);">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span >1</span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span>0</span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
							<button class="btn btn-success ibtn" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs" id="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span>6</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>6</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels" >
					<div render-loop="list">
						<dl class="list" >
							<dd>
								<a render-key="list.id" render-fun="getHref" data-href="travelContent.html?id=">
									<img  render-src="list.coverUrl">
									<p><span class="title" render-html="list.title"></span>
										<span class="span-right">
						 				<span >0</span> <i class="fa fa-thumbs-o-up"></i></span>
									</p>
								</a>
								<hr>
							</dd>
						</dl>
					</div>
				</div>

				<div class="comment tab-pane fade " id="comments">
				
					<div render-loop="list">
						<div class="row">
							<div class="col-2 comment-head">
								<img  class="rounded-circle" render-src="list.user.headImgUrl">
							</div>
							<div class="col">
								<span class="comment-star" render-key="list.starNum" render-fun="getStar">
								</span>

								<span class="comment-date" render-html="list.createTime"></span>
								<div class="comment-content">
									<a href="strategyComment.html"  data-id="4">
										<p render-html="list.content"></p>
									</a>
								</div>
								<ul class="comment-img" render-loop="list.imgArr">
									<li>
										<img  render-src="list.imgArr.self">
									</li>
								</ul>

								<div class="comment-link">
									<a data-href="strategyCatalogs.html?id=" data-id="2" render-key="list.strategy.id" render-fun="getHref">
										<img  render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>
</body>
</html>